<template>
	<div class="follow">
		<van-nav-bar
			title="添加跟进"
			left-arrow
			@click-left="
				() => {
					$router.replace('/detail');
				}
			"
		/>
		<Header></Header>
		<div class="title" style="margin-top: 20px;">
			<div class="title-left">
				<span class="bg"></span>
				<span>跟进状态</span>
			</div>
		</div>
		<van-radio-group style="margin: 15px 0;" v-model="radio">
			<van-cell-group>
				<van-cell v-for="(value, key) in follow" :title="value" :key="key" clickable @click="radio = key">
					<template #right-icon>
						<van-radio checked-color="#6881ec" :name="key" />
					</template>
				</van-cell>
			</van-cell-group>
		</van-radio-group>
		<div class="title" style="margin-top: 10px;">
			<div class="title-left">
				<span class="bg"></span>
				<span>跟进内容</span>
			</div>
		</div>
		<div class="textarea">
			<van-field v-model="message" required :error-message="errorMessage" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入跟进内容" show-word-limit />
			<div style=" padding: 10px 16px;"><van-uploader @delete="handleDelImg" v-model="fileList" :after-read="readFile" multiple /></div>
		</div>
		<div class="footer-btn"><van-button color="#6881ec" block @click="addFollow">保存</van-button></div>
	</div>
</template>

<script>
import { Divider, RadioGroup, Radio, Cell, CellGroup, Field, Uploader, Button, Toast,NavBar } from 'vant';
import { fetchAddFollow } from '../../api/detail.js';
import Header from './components/Header.vue';
export default {
	components: {
		[Divider.name]: Divider,
		[RadioGroup.name]: RadioGroup,
		[Radio.name]: Radio,
		[Cell.name]: Cell,
		[CellGroup.name]: CellGroup,
		[Field.name]: Field,
		[Uploader.name]: Uploader,
		[Button.name]: Button,
		[Toast.name]: Toast,
		[NavBar.name]:NavBar,
		Header
	},
	data() {
		return {
			radio: '',
			message: '',
			fileList: [],
			errorMessage: '',
			photo: [],
			follow: {
				// 1: '未跟进',
				2: '跟进中',
				3: '已拒绝',
				4: '已成交'
			}
		};
	},
	watch: {
		message(val) {
			if (val) {
				this.errorMessage = '';
			} else {
				this.errorMessage = '请输入跟进内容';
			}
		}
	},
	created() {
		document.title = '添加跟进';
	},
	methods: {
		async readFile(file, detail) {
			Toast.loading({
				message: '上传中...',
				forbidClick: true,
				duration: 0
			});
			const { data } = await this.$uploadImg(file.file);
			if (data.code === 200) {
				Toast.success(data.msg);
				this.photo.push(data.data);
			} else {
				Toast.fail(data.msg);
			}
		},
		handleDelImg(file, detail) {
			this.photo.splice(detail.index, 1);
		},
		async addFollow() {
			if (!this.message) {
				this.errorMessage = '请输入跟进内容';
			}
			if (!this.radio) {
				Toast.fail('请选择跟进状态');
			} else if (this.message && this.radio) {
				const { code, data, msg } = await fetchAddFollow({
					external_user_id: sessionStorage.getItem('external_user_id'),
					follow_userid: localStorage.getItem('huankemao_user_id'),
					add_follow_user: localStorage.getItem('huankemao_user_id'),
					content: this.message,
					photo: this.photo,
					follow_type: this.radio
				});
				if (code === 200) {
					this.$router.replace('/detail');
					Toast.success(msg);
				} else {
					Toast.fail(msg);
				}
			}
		}
	}
};
</script>

<style lang="less" scoped>
.follow {
	width: 100vw;
	overflow: hidden;
	font-size: 14px;
	color: #333;
	margin-top: 10px;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;

		.van-icon {
			font-size: 16px;
			color: #6881ec;
		}

		.title-left {
			display: flex;
			align-items: center;
			color: #6881ec;

			> .bg {
				width: 3px;
				height: 15px;
				background-color: #6881ec;
				margin-right: 6px;
			}
		}
	}

	.footer-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		z-index: 20;
	}
}
</style>
